<template>
  <div>
    <el-dialog
      title="提示"
      :visible="showDianog"
      width="60%"
      @close="btnCancel">
      <!-- 上面 题型 编号 难度 标签 -->
      <el-row type="flex" justify="before" >
        <el-col :span="6">
          <div>【题型】：
            <span v-if="datass.questionType == 1">单选题</span>
            <span v-if="datass.questionType == 2">多选题</span>
            <span v-if="datass.questionType == 3">简答题</span>
          </div>
        </el-col>

        <el-col :span="6">【编号】： <span>{{ datass.id }}</span></el-col>

        <el-col :span="6">
          <div>【难度】:
            <span v-if="datass.difficulty == 1">简单</span>
            <span v-if="datass.difficulty == 2">一般</span>
            <span v-if="datass.difficulty == 3">困难</span>
          </div>
        </el-col>

        <el-col :span="6"><div>【标签】：{{ datass.tags }}</div></el-col>
      </el-row>
     <br />
      <!-- 下面 学科 目录 方向-->
      <el-row type="flex" class="dialog">
        <el-col :span="6"><div>【学科】：{{ datass.subjectName }}</div></el-col>
        <el-col :span="6"><div>【目录】：{{ datass.directoryName }}</div></el-col>
        <el-col :span="8"><div>【方向】：{{ datass.direction }}</div> <br></el-col>

      </el-row>

      <!-- 题干 单选还是多选 -->

      <el-row class="dialog">
        【题干】：

        <div v-html="datass.question" class="name" />
        <div>
          <!-- <span v-if="datass.questionType == 1">单选题</span>
          <span v-if="datass.questionType == 2">多选题</span>
          <span v-if="datass.questionType == 3">简答题</span> -->

        </div>

        <!-- 单选 -->
        <div v-if="datass.questionType == 1">
          <span>单选题</span>
          选项：(以下选中的选项为正确答案)
          <br />
         <el-radio-group v-model="radio"  @change="change" >
            <div
              v-for="item in datass.options"
              :key="item.id"
              class="choice">
              <el-radio :label="item.isRight" :value="item.code" v-model="radio" @change="change"> {{ item.title }}</el-radio>
            </div>
          </el-radio-group>
        </div>
        <!-- /单选 -->

        <!-- 多选 -->
        <div v-if="datass.questionType == 2">
          <span>多选题</span>
          选项：(以下选中的选项为正确答案)
          <br />

          <div
            v-for="item in datass.options"
            :key="item.id"
            class="choice">
            <el-checkbox v-model="checked" :label="item.isRight" @change="checked=[1]">
              {{ item.title }}
            </el-checkbox>
          </div>
        </div>

        <!-- /多选 -->

        <!-- 简答 -->
        <div v-if="datass.questionType == 3">
          <span class="dialog">简答题</span>

          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入答案"
            v-model="textarea"
          >
          </el-input>
        </div>
      </el-row>
      <!-- 下面参考答案 -->
<el-row class="dialog">
  <span class="sisi">【参考答案】：</span>
  <el-button type="danger" size="mini" @click="btnLook" >视频答案预览</el-button></el-row>

      <!-- 视屏 -->
      <el-row >
        <video
          width="320"
          height="240"
          controls="controls"
          autoplay
          loop
          muted
          v-show="isShow"
        >
          <source :src="datass.videoURL" type="mp4" />
        </video>
      </el-row>
      <!--答案解析 -->
      <el-row type="flex" class="dialog">
        【答案解析】：{{ datass.answerID }}
      </el-row>
      <!-- 题目备注 -->
      <el-row type="flex" class="bottom">
        【题目备注】：{{ datass.remarks }}
      </el-row>
      <div class="answer"></div>
      <!-- 关闭按钮 -->
      <el-row type="flex" justify="end" >
        <el-button type="primary" @click="btnCancel">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '../../../../api/hmmm/questions.js'
export default {
  props: {
    showDianog: {
      type: Boolean,
      default: false
    },
    itemid: {
      type: Object,
      required: true
    }
  },

  data () {
    return {
      datass: {},

      textarea: '',
      // 默认为false，控制视屏显示
      isShow: false,
      // 单选多选
      radio: 1,
      checked: [1]
    }
  },

  methods: {
    async detail () {
      console.log(this.itemid)
      const { data } = await detail(this.itemid)
      this.datass = data
    },
    // 点击 显示视屏
    btnLook () {
      this.isShow = true
    },
    // 点击取消，关闭弹出层
    btnCancel () {
      console.log(33333366666666)
      this.$emit('update:showDianog', false)
    },
    // 点击 选项（单选 多选）
    change () {
      this.radio = 1
    }
  }
}
</script>

<style scoped>
.clumn {
  background-color: #ccc;
}
.dialog {
  border-bottom: 1px solid #000;
  padding: 5px 0;
}
.dialog:nth-child(5) {
  line-height: 40px;
}
.bottom {
  padding-top: 10px;
}
a {
  color: rgb(21, 173, 248);
}
.name {
  color: blue;
}
.answer{
width:100px;
height: 30px;
}
.choice{
  margin:10px 0px
}
</style>
